function render(albumList){
    //1.找到要插入的容器元素（找到tbody元素，tbody下的所有元素应该由js动态添加进来）
    var tbody=document.querySelector('tbody')
    //2.遍历专辑列表
    for(var i in albumList){
        var a=albumList[i];//格式：{aid:...,title:...,cover...,state}
        var anchor
        if(a.state==='已发布'){//对专辑是否发布的处理
            anchor=`<a href="/studio/album/withdraw.do?aid=${a.aid}">下线</a>`//对这个专辑下线操作
        }else{
            anchor=`<a href="/studio/album/publish.do?aid=${a.aid}">发布</a>`//对这个专辑上线操作
        }
        var html=`<tr><td>${a.aid}</td><td>${a.title}</td><td><img src="${a.cover}"></td><td>${a.state}</td><td><a href="/studio/album/bind.html?aid=${a.aid}">绑定</a></td><td>${anchor}</td></tr>`


        //3.添加每个音频的html到容器元素中
        tbody.innerHTML+=html
    }
}
function renderNoLogin(){
    document.querySelector('.who').textContent='必须登录后才能使用,请返回创作中心登录';
}
function renderWho(user){
    document.querySelector('.who').textContent=user.username;
}

//为了让js代码可以在所有资源都加载完成后才去执行，将入口代码放在window的load事件中
//load事件：当整个页面以及所有依赖资源如样式和图片都完成加载时，将触发load事件
window.onload=function(){
    //1.发起ajax请求
    var xhr=new XMLHttpRequest()
    xhr.open('get','/studio/album/list.json')
    xhr.onload=function(){
        //2.增加调试信息
        console.log(this.responseText);
        //3.尝试转换成JSON格式（如果后端出现了500错误，则响应不是JSON，这里就会错误）
        var data=JSON.parse(this.responseText)//接收服务端返回的json数据并解析
        //4.判断用户是否登录（根据currentUser)
        //没有登陆就不展示列表,提示未登录
        if(!data.currentUser){
            renderNoLogin(data.currentUser)
            alert('未登录，请返回创作中心登录');
            return;
        }
        renderWho(data.currentUser)
        render(data.albumList)

    }
    xhr.send()//发送请求
}



////为了让js代码可以在所有资源都加载完成后才去执行，就入口代码放在window的load事件中
//window.onload=function(){
////资源全部加载好开始执行方法
//    //1.ajax请求
//    var xhr=new XMLHttpRequest()
//    xhr.open('get','/studio/album/list.json')
//    xhr.onload=function(){
//        //2.JSON解析
//        var data=JSON.parse(xhr.responseText)
//        var oTable=document.querySelector('table')
//        var list=data.albumList
//        for(var i in list){
//            var a=list[i]
//            var anchor
//            if(a.state==='已发布'){//对专辑是否发布的处理
//                anchor=`<a href="/studio/album/withdraw.do?aid=${a.aid}">下线</a>`//对这个专辑下线操作
//            }else{
//                anchor=`<a href="/studio/album/publish.do?aid=${a.aid}">发布</a>`//对这个专辑上线操作
//            }
//            var html=`<tr><td>${a.aid}</td><td>${a.title}</td><td><img src="${a.cover}"></td><td>${a.state}</td><td><a href="/studio/album/bind.html?aid=${a.aid}">绑定</a></td><td>${anchor}</td></tr>`
//            oTable.innerHTML+=html;
//        }
//    }
//    xhr.send()
//}